<script setup lang="ts">

import {onMounted, ref, watch} from "vue";
import {NAMESPACE_MENU} from "../../interface/menu.ts";
import {updateMenu} from "../../api/menu.ts";
import {messageTip, MessageTipType} from "../../util/common.ts";
import _ from "lodash"

const dialogFormVisible = ref<boolean>()
const currentMenu = ref<NAMESPACE_MENU.MenuItem>({})
const operateResult = ref<boolean>(false)
const formLabelWidth = '140px'

const props = defineProps<{
  dialogFormVisible:boolean
  currentMenu:NAMESPACE_MENU.MenuItem
}>()

onMounted(()=>{
  currentMenu.value = _.cloneDeep(props.currentMenu)
  dialogFormVisible.value = props.dialogFormVisible
})

const handleSaveMenu = () => {
  updateMenu(currentMenu.value).then(
      data => {
        if (data.data) {
          messageTip("修改成功",MessageTipType.SUCCESS)
          dialogFormVisible.value = false
          operateResult.value = true
        }else {
          messageTip(data.data.message,MessageTipType.ERROR)
        }
      }
  )
}

const emit = defineEmits(['closeDialog'])

watch(() => dialogFormVisible.value,(value)=>{
  if (!value){
    emit('closeDialog',operateResult.value)
  }
})
</script>

<template>
  <el-dialog v-model="dialogFormVisible" title="修改用户组" width="30%" center >
    <el-form :model="currentMenu">
      <input hidden="hidden" v-model="currentMenu.id"/>
      <el-form-item label="菜单名" :label-width="formLabelWidth">
        <el-input v-model="currentMenu.name" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="父菜单id" :label-width="formLabelWidth">
        <el-input v-model.number="currentMenu.parentId" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="菜单路由"  :label-width="formLabelWidth">
        <el-input  v-model="currentMenu.route" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="菜单图标"  :label-width="formLabelWidth">
        <el-input  v-model="currentMenu.icon" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="描述" :label-width="formLabelWidth">
        <el-input v-model="currentMenu.intro" autocomplete="off"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSaveMenu">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped>
.el-select {
  width: 300px;
}

.el-input {
  width: 300px;
}

.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>